<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-08-12 11:35:16
 * @LastEditors: Silence
 * @LastEditTime: 2023-08-14 16:28:48
-->
<template>
  <div>
    <div class="searchTop">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="搜索区域">
          <el-input v-model="formInline.user" size="medium" placeholder="请输入"/>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="medium" type="primary" @click="getRegionList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_main">
      <div class="table_button">
        <el-button icon="el-icon-circle-plus-outline" size="medium" type="warning" @click="centerDialogVisible=true">
          新建
        </el-button>
      </div>
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="180"
        >
          <template slot-scope="{row,$index}">
            <div>{{ $index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="区域名称"
          width="180"
        />
        <el-table-column
          prop="nodeCount"
          label="点位数"
        />
        <el-table-column
          prop="remark"
          label="备注声明"
        />
        <el-table-column

          label="操作"
          width="150"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="handleClick(row)">查看详情</el-button>
            <el-button type="text" size="small" @click="update(row)">修改</el-button>
            <el-button type="text" size="small" style="color: red;" @click="deleteRegionList(row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- <div class="Pagination">
        <div class="text">
          <span>共8条数据</span>
          <span>第1/2页</span>
        </div>
        <div class="btn">
          <button>上一页</button>
          <button>下一页</button>
        </div>
      </div> -->
      <Pagination :pages="pages" :counts="counts" @update="getRegionList"/>
    </div>

    <el-dialog
      title="新增区域"
      :visible.sync="centerDialogVisible"
      :before-close="handleClose"
      width="40%"
    >
      <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="100px" class="dialog_ruleForm">
        <el-form-item label="活动名称" prop="regionName" style="font-size:13px">
          <el-input v-model.trim="ruleForm.regionName" maxlength="15" show-word-limit/>
        </el-form-item>
        <el-form-item label="活动名称" prop="remark">
          <el-input v-model.trim="ruleForm.remark" type="textarea" maxlength="40" show-word-limit/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetForm('ruleForm')">取消</el-button>
          <el-button @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>

  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import {
  getRegionListApi,
  addRegionListApi,
  updateRegionListApi,
  deleteRegionListApi,
  getRegionParticularsListApi
} from '@/api/area'

export default {
  name: '',
  components: {
    Pagination
  },
  data() {
    return {
      formInline: {},
      pages: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      counts: {
        totalCount: null,
        totalPage: 1
      },
      tableData: [],
      ruleForm: {
        regionName: '',
        remark: '',
        id: ''
      },
      rules: {
        regionName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 15 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 40, message: '长度在 40 个字符', trigger: 'blur' }
        ]
      },
      centerDialogVisible: false
    }
  },
  computed: {},
  created() {
    this.getRegionList()
  },
  methods: {
    async getRegionList() {
      const res = await getRegionListApi(this.pages)
      console.log(res)
      this.tableData = res.data.currentPageRecords
      this.counts.totalCount = res.data.totalCount
      this.counts.totalPage = res.data.totalPage
    },
    async handleClick(e) {
      const res = await getRegionParticularsListApi(e.id)
      console.log(res)
    },
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          try {
            if (this.ruleForm.id) {
              await updateRegionListApi(this.ruleForm)
            } else {
              await addRegionListApi(this.ruleForm)
            }
            this.handleClose()
            this.getRegionList()
          } catch (_) {
          }
        }
      })
    },
    resetForm() {
      this.handleClose()
    },
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.centerDialogVisible = false
      this.ruleForm = this.$options.data().ruleForm
    },
    // 更新数据
    update(e) {
      console.log(e)
      this.ruleForm.regionName = e.name
      this.ruleForm.remark = e.remark
      this.ruleForm.id = e.id
      this.centerDialogVisible = true
    },
    // 删除区域
    async deleteRegionList(id) {
      await deleteRegionListApi(id)
      this.getRegionList()
    }
  }
}
</script>
<style lang="scss">
.searchTop {
  .el-form-item__label {
    font-weight: 400;
  }
}

.dialog_ruleForm {
  label {
    font-weight: 400;
  }

  .el-form-item__content {
    .el-button:nth-child(1) {
      margin-left: 100px;
    }
  }
}

.table_main {
  .is-leaf {
    background-color: rgb(243 247 252);
  }
}
</style>
<style lang="scss" scoped>
.searchTop {
  height: 64px;
  width: 100%;
  padding: 14px 0;
  padding-left: 20px;
  margin-bottom: 20px;
  display: flex;
  background-color: #fff;

}

.table_main {
  padding: 20px;
  background-color: #fff;

  .table_button {
    padding-bottom: 20px;
  }
}

</style>
